<!-- 物料组成设计单 -->
<template>
  <div>
    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
      <el-table-column fixed prop="productId" label="产品编号" width="150">
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" width="150">
      </el-table-column>
      <el-table-column prop="productLevel" label="产品档次" width="150">
      </el-table-column>
      <el-table-column prop="firstKindName" label="I级分类" width="150">
      </el-table-column>
      <el-table-column prop="secondKindName" label="II级分类" width="150">
      </el-table-column>
      <el-table-column prop="thirdKindName" label="III级分类" width="150">
      </el-table-column>
      <el-table-column prop="useType" label="用途类型" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" style="float:left;margin-bottom:20px" @click="maketRegister(scope.row)">制定设计单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.currentPage"
      :page-sizes="[8, 10, 15]" :page-size="this.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <el-dialog title="制定设计单" :visible.sync="architect">
      <el-form ref="from" :model="from" label-width="105px">
        <el-row>
          <el-row>
            <el-col :span="24">
              <el-button type="primary" style="float:left;margin-bottom:20px" @click="Addmaterial =true">添加物料</el-button>
              <el-dialog title="添加物料单" :visible.sync="Addmaterial" append-to-body>
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column fixed prop="partid" label="物料编号" width="200">
                  </el-table-column>
                  <el-table-column prop="productName" label="物料名称" width="200">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="addPart(scope.row)">添加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-dialog>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item label="设计单编号">
              <el-input v-model="from.productId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input v-model="from.productName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品编号">
              <el-input v-model="from.productId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设计人">
              <el-input v-model="from.registerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核人">
              <el-input v-model="from.registerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核时间">
              <el-input v-model="from.audittime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="设计要求">
              <el-input type="textarea" v-model="from.part_requirements"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table :data="tableData2" border style="width: 100%">
          <el-table-column prop="productName" label="物料名称" width="120">
          </el-table-column>
          <el-table-column prop="productId" label="物料编号" width="120">
          </el-table-column>
          <el-table-column prop="useType" label="用途类型" width="100">
          </el-table-column>
          <el-table-column prop="part_number" label="数量" width="100">
          </el-table-column>
          <el-table-column prop="stock_number" label="单位" width="100">
          </el-table-column>
          <el-table-column prop="stock_number" label="单价(元)" width="108">
          </el-table-column>
          <el-table-column prop="stock_number" label="小计(元)" width="100">
          </el-table-column>
        </el-table>
        <div class="aa">
          <el-form-item>
            <el-button type="primary" @click="submitForm('numberValidateForm')">确定</el-button>
            <el-button @click="resetForm('numberValidateForm')">返回</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getData,
    postData
  } from '../../api/axios.js'
  export default {
    created() {
      this.productFile();
    },
    computed: {
      total() { //返回信息的条数
        return this.tableData.length
      }
    },
    methods: {
      maketRegister(row) {
        this.from = row
        this.architect = true
      },
      addPart(row) {
        this.tableData2.push(row)
      },
      //当每页显示数据的条数发生变化时
      handleSizeChange: function(val) {
        this.pagesize = val
      },
      //当页码进行切换时
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
      },
      productFile() {
        postData('product/fileyifuhe').then(response => {
          this.tableData = response.data;
          console.log(this.tableData)
        }).then(error => {
          console.log(error)
        })
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
			submitForm(){
				console.log('subbitem');
			},
			resetForm(){
				console.log('gwygc');
			}
    },
    data() {
      return {
        /* start----分页有关数据,利用计算属性，返回总记录数（total） */
        pagesize: 8,
        currentPage: 1,
        /* end----分页有关数据 */
        tableData: [{
        }],
        tableData2: [],
        architect: false,
        Addmaterial: false,
        from: {
        productId: '',
        productName: '',
        productLevel: '',
        firstKindName: '',
        secondKindName: '',
        thirdKindName: '',
        useType: '',
        }
      }
    }
  }
</script>
<style>
  .aa {
    text-align: right;
  }
  .el-pagination {
    text-align: center;
  }
</style>





















<!-- <template>
      <div>

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="产品编号">
            <el-input v-model="formInline.id" placeholder="产品编号"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
           <el-input v-model="formInline.user" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="dataList" border style="width: 100%">
        	<el-table-column  prop="date" label="编号" style="width:150px" >
        	</el-table-column>
        	<el-table-column prop="name" label="产品名称" style="width:150px">
        	</el-table-column>
        	<el-table-column prop="province" label="档次级别" style="width:150px">
        	</el-table-column>
        	<el-table-column prop="address" label="创建人" style="width:150px">
        	</el-table-column>
        	<el-table-column prop="zip" label="添加时间" style="width:150px">
        	</el-table-column>
          <el-table-column prop="city" label="产品审核通过时间" style="width:150px">
          </el-table-column>
        	<el-table-column label="操作" style="width:150px">
        		<template slot-scope="scope">
        			<el-button @click="handleClick(scope.row)" type="text" size="small">查询详情</el-button>
        			<el-button type="text" size="small">修改</el-button>
        			<el-button type="text" size="small">删除</el-button>
        		</template>
        	</el-table-column>
        </el-table>

          <div class="aa">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10,8, 5,4 ,]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="10">
              </el-pagination>

</div>
      </div>


</template>

<script>
      export default {
      	props: ['dataList'],

        data() {
              return {
                formInline: {
                  user: '',
                  region: ''
                }
              }
            },
            methods: {
              onSubmit() {
                console.log('submit!');
              },
              currentPage1: 5,
                      currentPage2: 5,
                      currentPage3: 5,
                      currentPage4: 4
            },
            handleClick(row) {
            	console.log(row);
            },
            handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
            }

      }
</script>

<style>
    .aa{
      text-align: center;
    }
</style>
 -->
